<template>
  <GlobalHeader
    text="主机工况参数(货油主机+2#泵)"
    xh="CW6250C1360DF7"
    xlh="2522L000025
"
    :hour="10"
  ></GlobalHeader>
  <div class="bj" style="display: flex; justify-content: center">
    <Gauge min="0" max="1000" :value="hyMainItemData('z401', 0)"></Gauge>
    <div class="parmar">
      <div>
        <span>主机滑油:</span><span>{{ hyMainItemData("z406", 1) }}℃</span
        ><span>{{ hyMainItemData("z405", 2) }}bar</span>
      </div>
      <div>
        <span>主机冷却水:</span><span>{{ hyMainItemData("z407", 1) }}℃</span>
      </div>
      <div>
        <span>主机排气:</span><span>{{ hyMainItemData("z408", 1) }}℃</span>
      </div>
      <div>
        <span>泵体温度:</span><span>{{ hyMainItemData("z609", 1) }}℃</span>
      </div>
      <div>
        <span>泵轴承温度:</span><span>{{ hyMainItemData("z610", 1) }}℃</span
        ><span>{{ hyMainItemData("z611", 1) }}℃</span>
      </div>
      <div>
        <span>泵轴温度:</span><span>{{ hyMainItemData("z612", 1) }}℃</span>
      </div>
      <div>
        <span>泵进口压力:</span><span>{{ hyMainItemData("z613", 2) }}bar</span>
      </div>
      <div>
        <span>泵出口压力:</span><span>{{ hyMainItemData("z614", 2) }}bar</span>
      </div>
    </div>
  </div>
  <!-- <ListParameter :list-data="hy_main" key-name="hy_main"></ListParameter> -->
</template>

<script setup>
import GlobalHeader from "./layout/GlobalHeader.vue";
import { initDecimalPlaces } from "@/utils/utils.js";
import Gauge from "@/echarts/Gauge";
let allData = inject("allData");
let hy_main = ref(null);
watch(
  () => allData.value,
  (newVal, oldVal) => {
    let hyMainInitData = { ...newVal.hy_main } || {};
    let hybInitData = { ...newVal.hyb } || {};
    hy_main.value = Object.assign(hyMainInitData, hybInitData);
  },
  {
    deep: true,
  }
);
let hyMainItemData = computed(() => {
  return (no, num) => {
    if (!hy_main.value) return initDecimalPlaces(num);
    let value = hy_main.value[no]?.currentValue;
    return value;
  };
});
</script>

<style scoped lang="scss">
.parmar {
  font-size: 25px;
  color: #fff;
  margin-left: 300px;
  div {
    margin: 7px 0;
  }
  span {
    display: inline-block;
  }
  span:nth-child(1) {
    width: 135px;
  }
  span:nth-child(2) {
    width: 100px;
    text-align: right;
  }
  span:nth-child(3) {
    margin-left: 50px;
    text-align: right;
  }
}
</style>
